<template>
	<el-dialog
		:visible="true"
		width="80%"
		:destroy-on-close="true"
		class="rempadding"
		:before-close="handleClose"
	>
		<div slot="title" class="dialog-title">
			<el-form :inline="true" label-width="auto">
				<el-row>
					<el-col :span="24">
						<el-form-item
							:label="$t('common.member_number') + ' : '"
						>
							{{ rowVal.userName }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<el-table
			v-loading="loading"
			size="mini"
			border
			:data="tableData"
			class="small-size-table"
			style="margin-bottom: 15px"
			:header-cell-style="getRowClass"
			element-loading-spinner="el-icon-loading"
			show-summary
			:summary-method="
				(val) => handleRowDetail(val, subSummary, totalSummary)
			"
			highlight-current-row
		>
			<el-table-column
				prop="dateTime"
				align="center"
				:label="$t('report.date')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.dateTime || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="venueName"
				align="center"
				min-width="150"
				label="场馆/项目"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.venueName || '-' }}
				</template>
			</el-table-column>
			<!-- <el-table-column
				prop="parentProxyName"
				align="center"
				min-width="150"
				:label="$t('common.top_agent')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.parentProxyName || '-' }}
				</template>
			</el-table-column> -->
			<el-table-column
				prop="betCount"
				align="center"
				:label="$t('report.bet_count')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleNumber('', scope.row.betCount, 0) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="betAmount"
				align="center"
				:label="$t('report.bet_amount')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleCurrency(scope.row.currency) }}
					{{ handleNumber(scope.row.currency, scope.row.betAmount) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="effectiveBetAmount"
				align="center"
				:label="$t('report.valid_bet_amount')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleCurrency(scope.row.currency) }}
					{{
						handleNumber(
							scope.row.currency,
							scope.row.effectiveBetAmount
						)
					}}
				</template>
			</el-table-column>
			<!-- <el-table-column
				prop="pumPing"
				align="center"
				label="抽水贡献"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.pumPing)">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(scope.row.currency, scope.row.pumPing)
						}}
					</span>
				</template>
			</el-table-column> -->
			<el-table-column
				prop="betProfitLoss"
				align="center"
				:label="$t('report.net_amount')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.betProfitLoss)">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.betProfitLoss
							)
						}}
					</span>
				</template>
			</el-table-column>
			<!-- <el-table-column
				prop="memberRebateAmountByProxy"
				align="center"
				label="代理发放会员返水"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span
						:style="
							handleNumberColor(
								scope.row.memberRebateAmountByProxy
							)
						"
					>
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.memberRebateAmountByProxy
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="memberRebateAmountByPlat"
				align="center"
				label="平台发放会员返水"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.rebateAmount)">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.memberRebateAmountByPlat
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="artificialPatchAmount"
				align="center"
				:label="$t('report.artificial_patch_amount')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleCurrency(scope.row.currency) }}
					{{
						handleNumber(
							scope.row.currency,
							scope.row.artificialPatchAmount
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="netProfit"
				align="center"
				:label="$t('report.net_profit')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.netProfit)">
						{{ handleCurrency(scope.row.currency) }}
						{{
							handleNumber(
								scope.row.currency,
								scope.row.netProfit
							)
						}}
					</span>
				</template>
			</el-table-column> -->
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			class="text-right"
			background
			:page-size="7"
			layout="total,prev, pager, next, jumper"
			:total="total"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<div slot="footer" class="dialog-footer" style="text-align: center">
			<el-button type="primary" @click="handleClose">关闭</el-button>
		</div>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
import summaryListDetail from './summaryListDetail'
export default {
	mixins: [list, summaryListDetail],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			tableDataArr: [
				{ venueName: '德州-俱乐部' },
				{ venueName: '德州-保险' },
				{ venueName: 'PM体育' },
				{ venueName: 'PM真人' },
				{ venueName: '博雅棋牌' },
				{ venueName: 'PM电竞' },
				{ venueName: 'DB彩票' },
				{ venueName: 'HC彩票' }
			],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			total: 0,
			dateList: ''
		}
	},
	methods: {
		calculateDateDifference(date1, date2) {
			var dateArray = []

			// 将日期字符串转换为Date对象，注意截取年、月、日的部分
			var year1 = parseInt(date1.substring(0, 4), 10)
			var month1 = parseInt(date1.substring(4, 6), 10) - 1 // 月份从0开始，所以要减1
			var day1 = parseInt(date1.substring(6, 8), 10)

			var year2 = parseInt(date2.substring(0, 4), 10)
			var month2 = parseInt(date2.substring(4, 6), 10) - 1
			var day2 = parseInt(date2.substring(6, 8), 10)

			var d1 = new Date(year1, month1, day1)
			var d2 = new Date(year2, month2, day2)

			// 循环生成日期数组
			while (d1 <= d2) {
				var formattedDate =
					d1.getFullYear() * 10000 +
					(d1.getMonth() + 1) * 100 +
					d1.getDate()
				dateArray.push(formattedDate)
				d1.setDate(d1.getDate() + 1)
			}
			dateArray.reverse()
			return dateArray
		},
		loadData() {
			this.tableData = []
			this.dateList = this.calculateDateDifference(
				this.rowVal.startDate,
				this.rowVal.endDate
			)
			this.rowVal.staticsDate = this.dateList[this.pageNum - 1]
			let allDatalength = this.dateList.length * 7
			this.loading = true
			this.$api
				.getReportMembernetamountDetailNew2(this.rowVal)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						for (let index in this.tableDataArr) {
							res.data.memberVenueDetailMap[
								this.tableDataArr[index].venueName
							].venueName = this.tableDataArr[index].venueName
							res.data.memberVenueDetailMap[
								this.tableDataArr[index].venueName
							].dateTime = this.rowVal.staticsDate
							this.tableData.push(
								res.data.memberVenueDetailMap[
									this.tableDataArr[index].venueName
								]
							)
						}
						this.total = allDatalength
						this.subSummary = res?.data?.summaryRespDTO || {}
					}
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getReportMembernetamountTotal2(this.rowVal)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						this.totalSummary = res?.data || 0
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.closeDialog(false)
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper .cell {
	display: flex;
	justify-content: center;
	align-items: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
